<template>
	<div class="zhiShi">
		<div class="bfff left-bottom">
			<div class="center flex-start table-head fWrap">
				<div class="c666 f14 timi-dis">收藏日期：</div>
				<div>
					<el-date-picker
						type="date"
						placeholder="请选择发布日期"
						value-format="YYYY-MM-DD 00:00:00"
						v-model="times"
						:disabled-date="pickerOptions"
					></el-date-picker>
				</div>
				<div class="c666 f14">标题：</div>
				<div>
					<el-input
						type="text"
						placeholder="请输入标题..."
						v-model="title"
						@keyup.enter.native="searchList"
					/>
				</div>
				<el-button class="primary" type="primary" @click="searchList"> 搜索</el-button>
				<el-button type="primary" plain @click="resetting">重置</el-button>
			</div>
			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane label="主题知识库" name="1"></el-tab-pane>
				<el-tab-pane label="企业视频课程库" name="2"></el-tab-pane>
			</el-tabs>
			<div class="left-top-content">
				<div class="center row disNo">
					<div class="label f14 c333">已选条件:</div>
					<div class="flex center fWrap flex-start">
						<div v-if="divideList.length > 0">
							<el-tag
								class="choice-tag"
								closable
								round
								effect="light"
								@close="delLists(index)"
								v-for="(item, index) in divideNames"
								:key="index"
							>
								<div v-if="item.stName">{{ item.stName }}</div>
								<div v-else>{{ item.name }}</div>
							</el-tag>
							<el-button type="primary" link @click="delList" v-if="divideList.length > 0"
								>清空筛选</el-button
							>
						</div>
					</div>
				</div>
				<div class="center row nav">
					<div class="label f14 c333">所属目录:</div>
					<div class="flex center flex-start fen-ax">
						<div
							:class="item.id == active ? 'ctheme' : ''"
							class="c666 f14 hover"
							@click="divides(item, index)"
							v-for="(item, index) in divide"
							:key="item.id"
						>
							{{ item.name }}
						</div>
					</div>
					<el-switch v-model="switchValue" active-text="多选" class="disNo" />
				</div>
				<div class="center row nav" v-if="children && children.length">
					<div class="label f14 c333">所属分类:</div>
					<div class="flex center flex-start fen-ax">
						<div
							:class="isActive(item) ? 'ctheme' : ''"
							@click="dividess(item)"
							class="c666 f14 hover"
							v-for="(item, index) in children"
							:key="item.id"
						>
							{{ item.name }}
						</div>
					</div>
				</div>
			</div>
			<div class="table-scrol">
				<div class="center table-head2">
					<div class="c666 f14 choice-num flex">已选：{{ tableList.length }}</div>
					<el-button class="primary" type="warning" @click="cancellation" plain>取消收藏</el-button>
				</div>
				<div class="table">
					<el-table
						@cell-click="cellClick"
						@select="selectClick"
						@select-all="selectClickAll"
						:data="list"
						style="width: 100%"
					>
						<el-table-column align="center" type="selection" min-width="60" />
						<el-table-column align="center" prop="title" label="标题" show-overflow-tooltip min-width="200"
							><template #default="{ row }">
								<el-button link type="primary" @click="cellClick(row)">{{ row.title }}</el-button>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							prop="ctName"
							label="分类"
							show-overflow-tooltip
							min-width="150"
						/>
						<el-table-column align="center" prop="createName" label="作者" min-width="100" />
						<el-table-column
							align="center"
							prop="pubTime"
							label="收藏日期"
							show-overflow-tooltip
							min-width="150"
						>
							<template #default="{ row }">
								{{ time(row.pubTime) }}
							</template>
						</el-table-column>
						<el-table-column align="center" prop="readCount" label="浏览量" min-width="100" />
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
					</el-table>
				</div>
			</div>
			<div class="bfff pagination-class">
				<v-pagination
					:total="+total"
					:size="pageSize"
					:page="current"
					@pagination="fetchList"
					@paginations="fetchLists"
				></v-pagination>
			</div>
		</div>
		<!-- 新建蒙层 -->
		<!-- <el-dialog v-model="visible" :show-close="false">
			<template #header="{ close, titleId, titleClass }">
				<div class="dialog-header center btheme cfff">
					<img src="@/assets/image/zhuTi/xin.png" alt="" />
					<div class="flex f33 fbold">选择知识分类</div>
					<el-icon class="pointer" size="20" color="#fff" @click="close">
						<Close />
					</el-icon>
				</div>
			</template>
			<div class="dialog-content">
				<el-tree
					:default-checked-keys="[9, 10]"
					ref="treeRef"
					:data="data"
					show-checkbox
					default-expand-all
					node-key="id"
					highlight-current
					:props="defaultProps"
				/>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button  @click="visible = false">取消</el-button>
					<el-button  type="primary" @click="router.push('/knowledgeCreation')"> 确定 </el-button>
				</div>
			</template>
		</el-dialog> -->
	</div>
</template>

<script setup>
import { Search, RefreshRight } from "@element-plus/icons-vue"
import { ElMessage } from "element-plus"
const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
// const visible = ref(false)

const list = ref([])
const activeName = ref("1")
//分类
const active = ref("")
const divide = ref([])
let divideList = ref([])
const children = ref([])
const divideNames = computed(() => divideList.value.map(item => item))
// const divideId = computed(() => divideList.value.map(item => item.id))
const checked = ref([])
//多选
const switchValue = ref(false)
//标题
const title = ref("")
const total = ref(0)
const current = ref(1)
const pageSize = ref(10)
const times = ref("")
//已选中
const tableList = ref([])
//二级分类
async function created() {
	if (activeName.value == 1) {
		const res = await getAxios(`/knowledge/kbSubjectWarehouse/findByListToCategory`)
		if (res.length) {
			divide.value = res
			divide.value.unshift({
				id: "",
				name: "不限",
			})
		} else {
			divide.value = []
		}
	}
	const ress = await getAxios(`/knowledge/kbCollect/selectCollect?current=1&size=10&type=${activeName.value}`)
	total.value = +ress.total
	list.value = ress.records
}
created()
const handleClick = async event => {
	if (event.props.name == "2") {
		const res = await getAxios(`/knowledge/kbSubjectWarehouse/findByListToCategoryVideo?isSearch=1`)
		if (res) {
			divide.value = [res]
			divide.value.unshift({
				id: "",
				name: "不限",
			})
		}
		const { records } = await getAxios(`/knowledge/kbCollect/selectCollect?current=1&size=${pageSize.value}&type=2`)
		list.value = records
	} else {
		const res = await getAxios(`/knowledge/kbSubjectWarehouse/findByListToCategory`)
		if (res.length) {
			divide.value = res
			divide.value.unshift({
				id: "",
				name: "不限",
			})
		} else {
			divide.value = []
		}
		const { records } = await getAxios(`/knowledge/kbCollect/selectCollect?current=1&size=${pageSize.value}&type=1`)
		list.value = records
	}
	// empty()
	active.value = ""
	checked.value = []
	children.value = []
	divideList.value = []
	tableList.value = []
}
function time(times) {
	return times.substring(0, 10)
}
// 目录高亮
function isActive(item) {
	return !!~checked.value.findIndex(check => check.id == item.id)
}

//分类
const divides = (item, index) => {
	active.value = item.id
	if (item.children && item.children.length) {
		children.value = item.children
		if (children.value[0].name != "不限") {
			children.value.unshift({
				id: item.id,
				name: "不限",
				stName: item.name + "/" + "不限",
			})
		}

		if (!switchValue.value) {
			checked.value = []
			divideList.value = []
		}
		if (item.name == "不限") {
			children.value = []
			divideList.value = []
			created()
		}
		dividess(children.value[0])
	} else {
		children.value = []
		children.value.unshift({
			id: item.id,
			name: "不限",
			stName: item.name + "/" + "不限",
		})
		list.value = []
		dividess(children.value[0])
	}
}
const dividess = async item => {
	if (switchValue.value) {
		if (isActive(item)) {
			const index = checked.value.findIndex(check => check.id == item.id)
			checked.value = checked.value.filter(check => check.id != item.id)
			divideList.value.splice(index, 1)
		} else {
			checked.value.push(item)
			divideList.value.push(item)
		}
	} else {
		checked.value = checked.value.filter(check => check.id != item.id)
		checked.value = []
		divideList.value = []
		checked.value.push(item)
		divideList.value.push(item)
	}
	const idlist = []
	divideList.value.forEach(item => {
		if (!item.stName) {
			idlist.push(item.id)
		}
	})
	const swIdList = []
	divideList.value.forEach(item => {
		if (item.stName) {
			swIdList.push(item.id)
		}
	})
	const rss = await getAxios(`/knowledge/kbCollect/selectCollect`, {
		current: 1,
		size: 10,
		// status: 1,
		type: activeName.value,
		categoryIds: idlist.join(),
		swIds: swIdList.join(),
	})
	total.value = +rss.total
	list.value = rss.records
}
watch(switchValue, () => {
	if (!switchValue.value) {
		checked.value = []
		divideList.value = []
	}
})
//清空
const delList = () => {
	active.value = ""
	checked.value = []
	children.value = []
	divideList.value = []
	created()
}
const searchList = async () => {
	const idlist = []
	divideList.value.forEach(item => {
		if (!item.stName) {
			idlist.push(item.id)
		}
	})
	const swIdList = []
	divideList.value.forEach(item => {
		if (item.stName) {
			swIdList.push(item.id)
		}
	})
	const rss = await getAxios(`/knowledge/kbCollect/selectCollect`, {
		current: 1,
		size: pageSize.value,
		type: activeName.value,
		categoryIds: idlist.join(),
		swIds: swIdList.join(),
		title: title.value,
		fromTime: times.value,
	})
	total.value = +rss.total
	list.value = rss.records
	current.value = "1"
}
const resetting = () => {
	title.value = ""
	times.value = ""
	active.value = ""
	checked.value = []
	children.value = []
	divideList.value = []
	current.value = "1"
	created()
}
const cellClick = row => {
	// const routerSwid = row.id
	if (activeName.value == "1") {
		router.push(`/knowledgeDetails?id=${row.id}&swId=${row.swId}`)
	} else {
		router.push(`/videoDetails?id=${row.id}&swId=${row.swId}`)
	}
}
const selectClick = row => {
	tableList.value = row
	// router.push("/knowledgeDetails")
}
const selectClickAll = row => {
	tableList.value = row
	// router.push("/knowledgeDetails")
}
const cancellation = async () => {
	try {
		if (tableList.value.length) {
			const listAll = []
			tableList.value.forEach(item => {
				listAll.push(item.collectId)
			})
			await postAxios("/knowledge/kbCollect/deleteBatch", listAll)
			ElMessage.success("取消收藏成功")
			tableList.value = []
			created()
		} else {
			ElMessage.error("请先选择知识")
		}
	} catch (error) {
		ElMessage.error(error)
	}
}
const fetchList = async val => {
	current.value = val
	const idlist = []
	divideList.value.forEach(item => {
		if (!item.stName) {
			idlist.push(item.id)
		}
	})
	const swIdList = []
	divideList.value.forEach(item => {
		if (item.stName) {
			swIdList.push(item.id)
		}
	})
	const rss = await getAxios(`/knowledge/kbCollect/selectCollect`, {
		current: val,
		size: pageSize.value,
		type: activeName.value,
		categoryIds: idlist.join(),
		swIds: swIdList.join(),
		title: title.value,
		fromTime: times.value,
	})
	total.value = +rss.total
	list.value = rss.records
}
const fetchLists = async val => {
	pageSize.value = val
	const idlist = []
	divideList.value.forEach(item => {
		if (!item.stName) {
			idlist.push(item.id)
		}
	})
	const swIdList = []
	divideList.value.forEach(item => {
		if (item.stName) {
			swIdList.push(item.id)
		}
	})
	const rss = await getAxios(`/knowledge/kbCollect/selectCollect`, {
		current: current.value,
		size: val,
		type: activeName.value,
		categoryIds: idlist.join(),
		swIds: swIdList.join(),
		title: title.value,
		fromTime: times.value,
	})
	total.value = +rss.total
	list.value = rss.records
}
//清空
const delLists = index => {
	divideList.value.splice(index, 1)
	checked.value.splice(index, 1)
	if (divideList.value.length == 0) {
		active.value = 0
		empty()
		created()
	}
}
//清空
function empty() {
	checked.value = [
		{
			id: "",
			name: "不限",
		},
	]
	time.value = []
	divideList.value = []
}
function pickerOptions(time) {
	return time.getTime() > Date.now()
}
</script>
<style lang="scss" scoped>
@import "/style/basis";
.zhiShi {
	background-color: #f8f8f8;
	height: 100%;
	overflow-y: scroll;
	.left-top-content {
		padding: 10px 15px;
		border: 1px solid #eceef5;
		margin: 20px 0 30px;

		.nav {
			.c666 {
				margin-right: 10px;
			}
			:deep(.el-switch) {
				margin-left: 20px;
			}
		}

		:deep(.el-tag__close) {
			background-color: #2972fa;
			color: #fff;
		}

		.choice-tag {
			height: 25px;
			line-height: 1;
			background: #f4faff;
			border: 1px solid #2972fa;
			border-radius: 15px;
			padding: 0 10px;
			color: #2972fa;
			font-size: 12px;
			margin-right: 10px;
		}

		.row {
			border-bottom: 1px dashed #eceef5;
			padding: 15px 0;
		}

		.label {
			width: 100px;
			@include maxWidth(1400) {
				width: 90px;
			}
			@include maxWidth(768) {
				width: 80px;
			}
			@include maxWidth(500) {
				width: 70px;
			}
		}
	}

	:deep(.el-tabs__active-bar) {
		height: 1px;
	}

	:deep(.el-tabs__nav-wrap::after) {
		height: 1px;
	}

	.left-bottom {
		padding: 30px;

		.table-head2 {
			border: 1px solid #eceef5;
			height: 50px;
			padding: 0 2%;

			.primary {
				border-radius: 3px;
			}
		}

		.table-head {
			height: 60px;

			:deep(.el-input) {
				margin-right: 10px;
			}

			.primary {
				margin-left: 20px;
			}

			.danger {
				color: #ff952c;
			}
		}

		:deep(.el-table) {
			border: 1px solid #eceef5;
			cursor: pointer;
		}
		:deep(.el-table__row) {
			&:hover {
				.title-hover {
					color: #2971ff;
				}
			}
		}
		:deep(.el-table th.el-table__cell) {
			background-color: #f4f7fa;
		}

		:deep(.el-table .el-table__cell) {
			height: 60px;
			color: #606266;
		}
	}
}
.pagination-class {
	display: flex;
	justify-content: center;
	padding-top: 20px;
}
:deep(.el-date-editor.el-input) {
	width: 200px;
	@include maxWidth(1400) {
		width: 200px;
	}
	@include maxWidth(1024) {
		width: 180px;
	}
	@include maxWidth(768) {
		width: 150px;
	}
	@include maxWidth(650) {
		display: none;
	}
}
:deep(.el-input) {
	width: 200px;
	@include maxWidth(1400) {
		width: 200px;
	}
	@include maxWidth(1024) {
		width: 180px;
	}
	// @include maxWidth(900) {
	// 	width: 100px;
	// }
	@include maxWidth(768) {
		width: 150px;
	}
	@include maxWidth(400) {
		width: 120px;
	}
}
.timi-dis {
	@include maxWidth(650) {
		display: none;
	}
}
.fen-ax {
	white-space: nowrap;
	width: 100%;
	overflow-x: scroll;
}
.disNo {
	@include maxWidth(768) {
		display: none;
	}
}
</style>
